<template>
  <div
    class="panel-div"
    :style="{ width: width + 'px' }"
  >
    <!-- 主体内容 -->
    <div
      class="panel-body"
      id="panel-body"
    >
    <div v-show="expandPanel">
      <slot name="body-content"></slot>
    </div>
      
    </div>
    <el-divider></el-divider>
    <!-- 控制面板状态 -->
    <div class="panel-control-div">
      <el-button
        calss="down"
        type="text"
        icon="el-icon-caret-bottom"
        @click="controlPanl('expand')"
        v-if="!expandPanel"
      ></el-button>
      <el-button
        class="up"
        type="text"
        icon="el-icon-caret-top"
        @click="controlPanl('hide')"
        v-else
      ></el-button>
    </div>
  </div>
</template>

<script>
/**
 * // 折叠面板
 */
export default {
  props: {
    width: {
      type: Number,
      default: 450
    }
  },
  data () {
    return {
      // 面板当前状态：false 隐藏
      expandPanel: false
    }
  },
  methods: {
    controlPanl (val) {
      var div = document.getElementById('panel-body');
      // 展开
      if (val === 'expand') {
        div.style.height = '400px';
      } else {
        // 隐藏
        div.style.height = '0px';
      }
      // 更改面板状态
      this.expandPanel = !this.expandPanel;
      this.$emit('panelStatus', val);
    }
  },
  mounted () {
    // 添加事件，用于父组件判断子组件是否加载完成
    this.$emit("mounted");
  }

}
</script>

<style lang="scss" scoped>
.panel-div .panel-body{
  // 添加过度动画
  height: 0px;
  transition: all 0.3s linear;
  will-change: height;
  background-color: white;
}

.panel-div .panel-control-div {
  height: 45px;
  background-color: white;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}
</style>